<template>
  <el-form ref="ruleFormRef"
           :model="passwordInfo"
           :rules="rules" label-width="auto">
    <el-form-item label="原密码" prop="oldPassword">
      <el-input v-model="passwordInfo.oldPassword" />
    </el-form-item>

    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="passwordInfo.newPassword" />
    </el-form-item>

    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="passwordInfo.confirmPassword" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user.ts'
import { reactive, ref } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import { profilePasswordRules } from '@/utils/element/elRules.ts'

const userStore = useUserStore()

const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>(profilePasswordRules)

const passwordInfo = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped lang="scss">

</style>
